$paginator-breakpoint: 767px;
$paginator-button-background-color: #295cbf;

.tangible-paginator-button {
  padding: 0.25rem 0.75rem;
  border-radius: 0;

  &,
  &[disabled],
  &:hover,
  &:hover[disabled] {
    color: inherit;
    background-color: inherit;
    border: 1px solid #ddd;
  }

  &:hover:not([disabled]) {
    cursor: pointer;
  }

  &[disabled],
  &:hover[disabled] {
    color: #999;
  }

  &.active {
    color: #ffffff;
    background-color: $paginator-button-background-color;
    border-color: $paginator-button-background-color;
  }
}

.tangible-paginator-buttons {
  .tangible-paginator-button {
    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &:not(:last-child) {
      border-right: 0;
    }
  }
}

@media (max-width: $paginator-breakpoint) {
  .tangible-paginator-button {
    padding: 0.5rem 1rem;
  }
}

.tangible-paginator-target {
  transition: opacity 0.3s;
  &.tangible-paginator-target-loading {
    opacity: 0;
  }
}
